<!-- layout是总框架，提供了插槽，便于复用 -->
<template >
  <body>
  <el-container class="layout-el-container">
    <el-header class="header">
      <header class="title">
        <button class="collapseButton" @click="collapseStatus">
          <img id="el-icon-d-arrow-right" src="public/菜单1.0.png">
        </button>
        <div class="title-inner">※ 练习室出品 ※</div>
        <div class="searchbox">
          <img @click="changeLight" class="light-btn" src="public/灯泡.png">
        </div>
      </header>
    </el-header>

    <el-container class="el-container-small">
      <el-aside
          width="auto"
          @mouseenter="collapseOpen"
          @mouseleave="collapseClose"
          style=" margin-right: 10px">
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            router
        >
          <el-menu-item
              :index='String("/")'
          >
            <img class="house" src="public/首页.png"/>
            <i class="el-icon-receiving"></i>
            <span class="demo3">
              首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页
            </span>
          </el-menu-item>

          <el-menu-item
              :index='String("/main")'
              style="border-radius: 5px 5px"
          >
            <img class="house" src="public/匹配方式.png"/>
            <i class="el-icon-receiving"></i>
            <span class="demo3">内规匹配</span>
          </el-menu-item>
          <el-menu-item
              :index='String("/team")'
              style="border-radius: 5px 5px"
          >
            <img class="house" src="public/团队.png"/>
            <i class="el-icon-receiving"></i>
            <span class="demo3">团队介绍</span>
          </el-menu-item>
        </el-menu>
      </el-aside>


      <el-main style="padding: 0;overflow: hidden;display: flex">
        <slot></slot>
      </el-main>
    </el-container>

  </el-container>
  </body>

</template>

<script>
export default {
  name:'Layout',
  data() {
    return {
      //开灯关灯按钮
      turnedOn: true,
      isCollapse: false,
    }
  },
  methods:{
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    collapseStatus() {
      this.collapseBtnClick = this.isCollapse;
      this.isCollapse = !this.isCollapse;

      const styleElement = document.getElementById("el-icon-d-arrow-right");
      const houseImg = document.getElementById("house");
      const matchImg = document.getElementById("match");
      const peopleImg = document.getElementById("people");
      if (this.isCollapse===false){
        // styleElement.style.border = "solid 2px white";
        styleElement.style.backgroundColor = "#c2c1c1";
        // houseImg.style.width = "0px";
      }else {
        styleElement.style.backgroundColor = "transparent";
      }

    },
    collapseOpen() {
      if (this.collapseBtnClick) return;
      this.isCollapse = false;

    },
    collapseClose() {
      if (this.collapseBtnClick) return;
      this.isCollapse = true;
    },

    changeLight(){
      this.turnedOn = !this.turnedOn
      // const cssTheme= { light: true };
      localStorage.setItem("light", this.turnedOn);
      if (this.turnedOn){
        document.body.className = 'light';
      }else {
        document.body.className = ':root';
      }
    }
  },


};
</script>

<style scoped>
/*@import '../css/Layout_dark.css';*/
@import '../css/Layout.css';


</style>
